
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    {% include 'header_content' %}
    {{  'public.js' | public_assets_content  }}
    <link rel="stylesheet" type="text/css" href="{{ 'theme.css' | public_asset_abs_url }}">
    <link rel="stylesheet" type="text/css" href="{{ 'account.css' | public_asset_abs_url }}">
    <link rel="stylesheet" type="text/css" href="{{ 'vendor.css' | public_asset_abs_url }}">
    <style>
      .popup-product-warp .product-details .product-btns .secondary_btn,.popup-product-warp .product-details .product-btns .main_btn {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }
      .popup-product-warp .product-price{
        font-size: 1.4285714286rem;
        line-height: 1.7142857143rem;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
      }
      @media screen and (max-width: 500px) {
        .popup-product-warp .product-details .cell-item{
          margin-top: 10px;
        }
        .popup-product-warp{
          padding: 40px 20px;
        }
        .popup-product-warp .product-details .cell-item-btns{
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          padding:  20px;
          border-top: 1px solid #E8E8E1;
          background-color: #fff;
          margin: 0;
        }
        .popup-product-warp .product-sku{
          padding-bottom: 137px;
        }
        .popup-product-warp .product-details .cell-item,.popup-product-warp .product-sku-values{
          {%- comment -%} justify-content: start; {%- endcomment -%}
        }
    
        .popup-product-warp .product-details .product-calculator{
          border: 1px solid #999;
        }
        .popup-product-warp .product-details .product-calculator .product-calculator-value{
          margin: 0;
        }
        .popup-product-warp .product-details .product-btns{
          flex-direction: column;
        }
        .popup-product-warp .product-details .product-btns .secondary_btn{
          margin-top: 0;
        }
        .popup-product-warp .product-details .product-btns .main_btn{
          margin-top: 20px;
        }
        .popup-product-warp .product-details .product-title div{
          font-size: 16px !important;
          {%- comment -%} text-align: left; {%- endcomment -%}
          
        }
        .popup-product-warp .product-details .product-title{
          margin-bottom: 10px;
        }
        .popup-product-warp .product-details .product-title::after{
          display: none;
        }
        .popup-product-warp .icon-claer{
          top: 10px;
          right: 10px;
        }
        .quickview-warp-hide{
         display: none !important;  
        }


        {% comment %} 移动端商品图 {% endcomment %}

        .popup-product-warp .mobile_product_preview {
          display: flex !important;
          justify-content: center;
        }
        .popup-product-warp .mobile_product_preview .swiper-container {
          height: 100px;
          width: 100px;
          margin: 0;
        }
        .popup-product-warp .mobile_product_preview .swiper-container .product_preview-video-container{
          height: 100px;
        }
        .popup-product-warp .mobile_product_preview .swiper-container .product_preview-video-container .video-product_preview-box{
          height: 100%;
        }
        .popup-product-warp .mobile_product_preview .swiper-container .product_preview-video-container video{
          object-fit: fill;
        }
        .popup-product-warp .mobile_product_preview .product-swiper-small,
        .popup-product-warp .mobile_product_preview .product-preview-small{
          display: none !important;
        }
      }
      .popup-product-warp .mobile_product_preview{
        display: none;
      }
      
      
    </style>
    {% include product_option %}
    {% get_script_content route={template_route} scope=0 position=0 %}
</head>
<body>
<div class="popup-product-warp product_quick_detail" id="product_quick_detail">
  <svg class="icon-claer popup-claer" t="1634191042040" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3072" width="20" height="20">
    <path d="M571.008 511.936l313.088-311.04a42.688 42.688 0 0 0 0-58.816l-2.496-2.496a40.384 40.384 0 0 0-56.704 0l-313.088 313.6-313.088-311.04a40.384 40.384 0 0 0-56.704 0l-2.496 2.496a42.688 42.688 0 0 0 0 58.816l313.088 308.608-313.088 311.04a42.688 42.688 0 0 0 0 58.816l2.496 2.496a40.384 40.384 0 0 0 56.704 0l313.088-313.6 313.088 311.04a40.384 40.384 0 0 0 56.704 0l2.496-2.496a42.688 42.688 0 0 0 0-58.816z" fill="#1D1F21" p-id="3073">
    </path>
  </svg>
  {% if theme_config.global.product_quickview_type == "normal" %}
  <div class="product-swiper is-quickview-type">
    {%- assign productId = product.id | default: block_id  -%}
    {% include 'product_preview', previewImage:product.images , showSmall:true,productId: productId,blockId:productId %}
  </div>
  {% endif %}
  <div class="product-details {{theme_config.global.product_right_float}}" id="preview-sku-option">
    {% if theme_config.global.product_quickview_type == "normal" %}
    <div class="mobile_product_preview">
      {%- assign productId = product.id | default: block_id  -%}
      {%- assign productIdBlock = product.id | default: block_id | append: '_mobile'  -%}
      {% include 'product_preview', previewImage:product.images ,showSmall:true,productId: productId,blockId:productIdBlock %}
    </div>
    {% endif %}
    <div class="quickview-warp-hide">
    {% if theme_config.global.product_quickview_type == "normal" %}
    <div class="product-title is-quickview-type">
      <div class="line-clamp2 general_title-color">{{product.title}}</div>
    </div>
   {%- if product.star -%}
    <div class="cell-item">
      {% include 'comment_star', score:product.star %}
    </div>
   {%- endif -%}

    {% endif %}
    </div>
    <div class="product-sku">
      <div class="cell-item is-quickview-type" >
        <div class="product-price">
          <div class="product-price-number general_buying-color"></div>
          <div class="product-price-market general_original-color"></div>
          {%- if theme_config.global.product_discount_label_style_switch -%}
          <div class="product-price-discount"></div>
          {%- endif -%}
        </div>
        
      </div>
      {%- if product.virtual_sale_count -%}
        <div class="product-info-describe virtual_sale">{{ product.virtual_sale_count | plus: product.sale_count }} {{lang.product.sold}}</div>
      {%- endif -%}
      <div class="sku-cell"></div>
      <div class="plugin-product_detail-quantity_top" data-product-id="{{product.id}}"></div>
      {% if theme_config.global.product_quantity or theme_config.global.product_quantity  == nil %}

        <div class="cell-item">
          <span class="product-sku-name">{{ lang.cart.list.quantity }}</span>
        </div>
        <div class="cell-item">
          <div class="product-calculator mo-quantity">
            <div class="product-calculator-handle" data-type='reduce'>
                      {% include icon_minus ,{width:'16',height:'16'} %}
            </div>
            <input class="product-calculator-value"  min="1" type="number" value="{{theme_config.global.product_quantity_number | default:1}}"/>
            <div class="product-calculator-handle" data-type='add'>
                      {% include icon_plus ,{width:'16',height:'16'} %}
            </div>
          </div>
        </div>
      {% endif %}
      
      <div class="cell-item cell-item-btns">
        <div class="product-btns">
              <div class="mo-btn-disable mo-btn product-out-of-stock" style="{% if product.available == 1 %}display:none{% endif %}">{{ lang.product.out_of_stock }}</div>
              <div class="product-btns product-out-of-delete" style="display: none;">
                <div class="mo-btn mo-btn-default mo-btn-disable mo-btn-plan mo-btn-max mo-btn-block" >{{lang.account.wishlist.product_offline}}</div>
              </div>
              {% assign product_shopping_btn = theme_config.global.product_shopping_btn | default :'show' %}
              {%- if product_shopping_btn != 'hide' -%}
                    <div class="product-btns product-cart-group" style="{% if product.available == 0 %}display:none{% endif %}">
                        {%- if product_shopping_btn == 'add' or product_shopping_btn == 'show'  -%}
                        <div class="secondary_btn" style="min-height:48px" data-type="cart">{{lang.product.add_to_cart}}</div>
                        {%- endif -%}

                        {% if product_shopping_btn == 'show'  %}
                        <div class="divider is-quickview-type"></div>
                        {% endif %}

                        {%- if product_shopping_btn == 'buy' or product_shopping_btn == 'show'  -%}
                        <div class="is-quickview-type main_btn" data-type="buy_now">{{lang.product.buy_it_now}}</div>
                        {%- endif -%}
                    </div>
              {%- endif -%}
        </div>
      </div>
      <div class="plugin-product_detail-buy_bottom"  data-product-id="{{product.id}}"></div>
      {% if theme_config.global.product_quickview_type == "normal" %}
      <div class="cell-item is-quickview-type quickview-warp-hide">
        <a stlye="text-decoration: underline;" class="cart-button cart-button-plan" href="javascript:;" id="view-detail" >{{lang.product.view_detail}}</a>
      </div>
      {% endif %}
      <div class="plugin-product_detail-buy_describe_bottom"  data-product-id="{{product.id}}"></div>


    </div>
  </div>
</div>


<script type="text/javascript">
(function(){
  const temp = $('#product_quick_detail');

  document.addEventListener('DOMContentLoaded', (event) => {
      window.parent.window.quickViewLoad(temp.innerHeight());
      setTimeout(function () {
        window.parent.window.quickViewLoad(temp.innerHeight());
        $("html,body").css({"height":"100%","overflow-y":"auto"})
      },100)
      $('html,body').find('img[data-src]').each(function(){
          window.addLazyImages && window.addLazyImages($(this))
      })
  });


  const productDetail = new omesaasProduct({
    product: oemcart_product,
    data_from:'{{ detail_data_from }}',
    ec_currency_code: '{{ base_currency.standard_code }}',
    id: temp.find("#preview-sku-option"),
    block_id:"{{productId}}",
    {% if theme_config.global.product_quantity == true %}
    quantity:{{theme_config.global.product_quantity_number | default:1}},
    {% endif %}
  });

  temp.find("[data-type='cart']").click(function () {
      if (!productDetail.verifyOption("cart")) {
        return false;
      }

      var load = moi.nodeShowLoading(this, "mo-loading-black");
      productDetail.addCart(
        function () {
          load.close();
        },
        function (data) {
          if (!data.code) {
            window.parent.window.quickViewCart({...productDetail.params,cart:data.data});
          } else {
            return moi.alert({
              title: data.msg
            });
          }
        }
      );
    });
  temp.find("[data-type='buy_now']").click(function () {
      if (!productDetail.verifyOption("buy")) {
        return false;
      }

      var load = moi.nodeShowLoading(this);

      productDetail.buynow(
        function () {
          load.close();
        },
        function (ret) {
          if (!ret.code) {
            window.parent.window.quickViewBuy(ret.data.checkout_url);
          } else {
            return moi.alert({
              title: ret.msg
            });
          }
        }
      );
    });

  temp.find("#view-detail").click(function(){
    window.parent.window.quickViewDetail('/products/{{product.handle}}');
  })
  
  temp.find(".popup-claer").click(function(){
    window.parent.window.quickViewClose();
  })
  moi.quantity({
    dom: temp.find(".mo-quantity"),
    change(val) {
      productDetail.setSelectedVal({ quantity: val.value });
    }
  });

})()
</script>
 {% get_script_content route={template_route} scope=0 position=1 %}
</body>
</html>
